<template>
  <div class="u-title u-title-1 clearfix">
    <h3>
      <span class="f-ff2">{{ info?.title }}</span>
    </h3>
    <span class="sub s-fc3"
      ><span id="playlist-track-count">{{ info?.trackCount }}</span
      >首歌</span
    >
    <div class="more s-fc3">
      播放：<strong id="play-count" class="s-fc6">{{ info?.playCount }}</strong
      >次
    </div>
  </div>
</template>

<script>
import { inject } from "@vue/runtime-core";
export default {
  name: "SongListHeadTitle",
  setup() {
    const info = inject("listHeadInfo");
    return {
      info,
    };
  },
};
</script>

<style scoped lang="less">
.u-title-1 {
  height: 33px;
  border-bottom: 2px solid #c20c0c;
  h3 {
    float: left;
    font-size: 20px;
    line-height: 28px;
    font-weight: normal;
  }
  .sub {
    float: left;
    margin: 9px 0 0 20px;
  }
  .more {
    float: right;
    margin-top: 5px;
  }
}
</style>
